<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="skuName" @custom="searchProduct" @search="searchProduct" placeholder="请输入商品订单号"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
			</view>
			<view style="background-color: #fff;">
				<uni-section>
					<view class="uni-padding-wrap" style="width: 100%;">
						<uni-segmented-control :current="tabIndex" :values="items" :style-type="styleType"
							:active-color="bgColor" @clickItem="titleTabClick" />
					</view>
				</uni-section>
				<!-- 状态 -->
				<view style="margin: 10px 0 10px 0;">
					<!-- （选项数量小于4个) -->
					<view v-if="tabList.length <= 4" class="sku-select1">
						<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
							<view class="flex-text" :class='item.name == stateData.name?"right-class-active":""'
								v-for="(item,index) in tabList" :key="index" @click='tabClick(item,index)'>{{item.name}}
							</view>
						</view>
					</view>
					<!-- （选项数量大于4个）如果是大于超出2行高度则显示横向滚动条 -->
					<view v-else class="sku-select2">
						<scroll-view class="scroll-content" scroll-x="true" :scroll-with-animation="true">
							<text :class='item.name == stateData.name?"right-class-active":""'
								v-for="(item,index) in tabList" :key="index" @click='tabClick(item,index)'>
								{{item.name}}
							</text>
						</scroll-view>
					</view>
				</view>
			</view>

			<!-- 售后日期筛选 -->
			<view style="background-color: #fff;padding-left: 20rpx;">
				<view style="display: flex; flex-flow: row;height: 40px;line-height: 40px;">
					<uni-datetime-picker v-model="range" type="daterange" @change="calendarConfirm" :color="bgColor"
						close clear>
						<view style="display: flex;flex-flow: row;" :style="{color:calendarShow?bgColor:null}"
							@click="calendarShow = true">
							<view style="font-size: 14px;margin-right: 6rpx;">申请日期</view>
							<u-icon :name="calendarShow?'arrow-up-fill':'arrow-down-fill'" size="12"
								:color="calendarShow?bgColor:''"></u-icon>
						</view>
					</uni-datetime-picker>

				</view>
			</view>
		</view>

		<!-- <view class="content"> -->
		<!-- 这里是可滚动的内容 -->
		<swiper v-if="tabName == 'afterSale'" class="tab-view" :duration="300" :current.sync="tabCurrentIndex">
			<swiper-item class="swiper-item" v-for="(tab, index) in tabList" :key="index" style="display: flex;">
				<scroll-view class="scroll-view" @scrolltolower="scrolltolowerFn" scroll-y
					style="height: 100%; overflow: hidden;">
					<!-- 封装组件 -->
					<swiper-page-order ref="tab" :tab="tab" :bgColor="bgColor"
						@toDetails="toDetails"></swiper-page-order>
				</scroll-view>
			</swiper-item>
		</swiper>
		<swiper v-if="tabName == 'responsibly'" class="tab-view" :duration="300" :current.sync="tabCurrentIndex">
			<swiper-item class="swiper-item" v-for="(respon, indexn) in tabList" :key="indexn" style="display: flex;">
				<scroll-view class="scroll-view" @scrolltolower="scrolltolowerFn" scroll-y
					style="height: 100%; overflow: hidden;">
					<!-- 封装组件 -->
					<swiper-respon-page ref="respon" :respon="respon" :bgColor="bgColor"
						@toResDetails="toResDetails"></swiper-respon-page>
				</scroll-view>
			</swiper-item>
		</swiper>


	</view>
</template>

<script>
	import tabBar from '@/components/tab-bar/tab-bar.vue';
	import swiperPageOrder from '../components/nvue-swiper-page-order.vue';
	import swiperResponPage from '../components/swiper-respon-page.vue';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	import UniSection from '@/components/uni/uni-swipe-action/uni-swipe-action.vue';
	export default {
		components: {
			swiperPageOrder,
			tabBar,
			'uni-section': UniSection,
			swiperResponPage
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tabCurrentIndex: 0,
				tabList: [],
				skuName: '', //关键字搜索
				calendarShow: false, //日期范围弹窗
				refundStatus: 9, //tabs类型,默认查全部
				//---
				calendarShow: false, //时间日期选择框
				calendar: {
					minDate: '',
					maxDate: '',
					defaultDate: [],
					monthNum: 13,
				},
				// ------时间选择
				range: [],
				items: ['售后单', '判责单'],
				tabIndex: 0,
				styleType: 'text', //切换按钮
				showSkeleton: true, //骨架屏显示隐藏
				// ---------状态---------
				stateData: {
					name: '全部', //默认查全部
				},
				tabName: 'afterSale',
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.tabList = [{
					id: "tab11",
					state: 0,
					name: '全部',
					type: 0, //必带类型
					orderList: []
				},
				{
					id: "tab12",
					state: 1,
					name: '待审核',
					type: 0,
					orderList: []
				},
				{
					id: "tab13",
					state: 2,
					name: '未通过',
					type: 1,
					orderList: []
				},
				{
					id: "tab14",
					state: 3,
					name: '退款中',
					type: 2,
					orderList: []
				},
				{
					id: "tab15",
					state: 4,
					name: '已退款',
					type: 3,
					orderList: []
				}
			];
			this.chooseTimed();
		},
		methods: {
			titleTabClick(item) {
				// this.tabIndex = item.index;
				this.tabIndex = item.currentIndex;
				this.tabIndex == 0 ? this.tabName = "afterSale" : this.tabName = "responsibly";
			},
			// 搜索订单号，orderNo
			searchProduct(value) {
				this.$refs.tab[this.tabCurrentIndex].searchProduct(value);
			},
			//tabs 标签切换事件
			tabClick(item, index) {
				this.tabCurrentIndex = index; //订单状态索引
				this.stateData.name = item.name;
			},
			scrolltolowerFn() {
				if(this.tabName == 'afterSale'){
					this.$refs.tab[this.tabCurrentIndex].scrolltolowerFn();
				}else{
					this.$refs.respon[this.tabCurrentIndex].scrolltolowerFn();
				}
			},
			toDetails(item) {
				this.goPage('/pages/orderMarket/orderDetail/orderDetail?data=' + JSON.stringify(item));
			},
			toResDetails(item) {
				this.goPage('/pages/orderMarket/responDetail/responDetail?data=' + JSON.stringify(item));
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},

			//日期选择确认
			calendarConfirm(dates) {
				let list = dates;
				let dateLimitArray = [];
				dateLimitArray.push(list[0], list[list.length - 1])
				let dateLimit = dateLimitArray.join(",")
				this.$refs.tab[this.tabCurrentIndex].calendarProduct(dateLimit);
			},
			close() {
				console.log('111')
			},
			//日期选择确认
			// calendarConfirm(dates) {
			// 	let list = dates;
			// 	let dateLimitArray = [];
			// 	dateLimitArray.push(list[0], list[list.length - 1])
			// 	let dateLimit = dateLimitArray.join(",")
			// 	this.$refs.tab[this.tabCurrentIndex].calendarProduct(dateLimit);
			// },
			// 设置默认日期，最大值为今天，最小值为去年今天
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month <= 9) {
					month = '0' + month;
				}
				if (day <= 9) {
					day = '0' + day;
				}
				let minyear = year - 1;
				this.calendar.minDate = minyear + '-' + month + '-' + day;
				this.calendar.maxDate = year + '-' + month + '-' + day;
				this.calendar.defaultDate = year + '-' + month + '-' + day;
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		// background-color: lightblue;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	::v-deep .u-popup.data-v-3a231fda {
		flex: 0 !important;
	}

	// .content {
	// 	flex: 1;
	// 	overflow: hidden;
	// }

	// .scroll-view {
	// 	height: 100%;
	// }

	// .scroll-view-inner {
	// 	height: 200%;
	// 	/* 根据实际情况设置高度 */
	// 	background-color: #fff;
	// 	/* 内容区域背景色 */
	// }

	.sku-select2 {
		.scroll-content {
			white-space: nowrap;
			height: 86rpx;

			text {
				margin: 8rpx 8rpx;
				background-color: #f7f7f7;
				line-height: 86rpx;
				text-align: center;
				color: #777;
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				border: 1rpx solid #FFF;
			}

			.right-class-active {
				@include main_color(theme);
				@include main_bg_rgba_color(theme, 0.15);
				// border: 1rpx solid;
			}
		}
	}
</style>